<template>
  <div class="app-container receipt-detail">
    <header class="detail-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">收文审核详情</div>
      </div>
      <div class="detail-table">
        <table>
          <tr>
            <td>来文标题：</td>
            <td>{{receipt.docTitle}}</td>
            <td>收文编号：</td>
            <td>{{receipt.docCode}}</td>
            <td>来文号：</td>
            <td>{{receipt.codeName}}</td>
            <td>归档分类：</td>
            <td>{{archiveTypeArr[parseInt(receipt.archiveType)-1]}}</td>
          </tr>
          <tr>

        </tr>
          <tr>
            <td>来文日期：</td>
            <td>{{receipt.receiptDate}}</td>
            <td>等级：</td>
            <td>{{docLevelArr[parseInt(receipt.docLevel)-1]}}</td>
            <td>来文单位：</td>
            <td>{{receipt.receiptUnit}}</td>
            <td>保管期限：</td>
            <td>{{storePeriodArr[parseInt(receipt.storePeriod)-1]}}</td>
          </tr>
          <tr>
            <td>来文类型：</td>
            <td>{{receiptTypeArr[parseInt(receipt.receiptType)-1]}}</td>
            <td>审核人：</td>
            <td>{{receipt.auditorName}}</td>
            <td>流转状态：</td>
            <td>审核</td>
            <td>附件：</td>
            <td></td>
          </tr>
        </table>
      </div>
      <div class="detail-content">
        {{receipt.receiptContent}}
      </div>
    </header>
    <section class="circulation-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">公文流转</div>
      </div>
      <div class="main">
        <div class="staff-template">
          <div class="top-bar">
            <div class="top-bar-title">人员名单</div>
            <div class="top-bar-section">
              <el-select placeholder="请选择流程名单模板" v-model="showWenId" @change="showWenChange">
                <el-option v-for="(item,index) in showWenList" :key="index" :value="item.tid" :label="item.tname"></el-option>
              </el-select>
              <svg-icon icon-class="add-person" @click="addPerson(true)"></svg-icon>
            </div>
          </div>
          <div class="section">
            <draggable v-model="showWenPersonArr">
              <transition-group tag="ul" name="list">
                <li class="list-item" v-for="element in showWenPersonArr" :key="element.value">
                  <p>
                    <i class="el-icon-user"></i>
                    <span v-text="element.label"></span>
                  </p>
                  <p class="btn-group">
                    <i class="el-icon-close" @click="removePerson(element.value,1)"></i>
                  </p>
                </li>
              </transition-group>
            </draggable>
          </div>

        </div>
        <div class="watch-template">
          <div class="top-bar">
            <div class="top-bar-title">查看名单</div>
            <div class="top-bar-section">
              <el-select placeholder="请选择查看名单模板" v-model="readWenId" @change="readWenChange">
                <el-option v-for="(item,index) in readWenList" :key="index" :value="item.tid" :label="item.tname"></el-option>
              </el-select>
              <svg-icon icon-class="add-person" @click="addPerson(false)"></svg-icon>
              <!--<i class="el-icon-circle-plus-outline template-add"></i>-->
            </div>
          </div>
          <div class="section">
            <draggable v-model="readWenPersonArr">
              <transition-group tag="ul" name="list">
                <li class="list-item" v-for="element in readWenPersonArr" :key="element.value">
                  <p>
                    <i class="el-icon-user"></i>
                    <span v-text="element.label"></span>
                  </p>
                  <p class="btn-group">
                    <i class="el-icon-close" @click="removePerson(element.value,0)"></i>
                  </p>
                </li>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
      <p class="tip"><i class="el-icon-warning"></i>鼠标上下拖动名称可以改变顺序</p>
      <div class="footer">
        <el-button @click="submit">提交</el-button>
      </div>
    </section>
    <el-dialog
      title="添加人员"
      :visible.sync="personDialog"
    >
      <div class="checkerList">
        <el-form>
          <el-select v-model="checkUser">
            <el-option
              v-for="item in userList"
              :key="item.value"
              :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form>
      </div>
      <div slot="footer">
        <el-button
          type="success"
          @click="submitChecker"
          >确 定</el-button>
        <el-button type="default" @click="personDialog = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import userAPI from '@/api/system/user'
  import receiptAPI from '@/api/receipt/receipt'
  import oaTemplateAPI from '@/api/system/oaTemplate'
  import draggable from 'vuedraggable'
  export default {
    name: "ReceiptVerifyDetail",
    components: {
      draggable,
    },
    data() {
      return {
        receipt: {
          docId: this.$route.params.id,
          docTitle: '',
          docCode: '',
          codeName: '',
          codeYear: '',
          codeNo: '',
          receiptDate: '',
          receiptUnit: '',
          archiveType:'',
          docLevel:'',
          storePeriod:'',
          receiptContent:'',
          auditor:'',
          docState:'',
          signIndex:'',
          signCount:'',
          parentDocId:'',
          hasIssue:'',
          creator:''
        },
        archiveTypeArr:['局本级类','市级类','区其他类','综合类','区级类','涉法涉诉','省级类'],
        docLevelArr:['机密','绝密','一般','私密'],
        receiptTypeArr:['传阅件','一般件','承办件','涉法涉诉'],
        storePeriodArr:['10年','20年','30年','不归档','永久'],
        showWenId:[],
        readWenId:[],
        showWenList:[],
        readWenList:[],
        showWenPersonArr:[],
        readWenPersonArr:[],
        personDialog:false,
        userList:[],
        checkUser:'',
        isAddApprove:false
      }
    },
    computed:{
    },
    created() {
      this.fetchData()
      // 拉取审核人员模板
      this.getReceiptDocumentTemplateList()
      // 拉取查看人员模板
      this.getReceiptReadTemplateList()
      // 拉取用户列表
      this.getUserList()
    },
    methods: {
      getUserList(){
/*        userAPI.getList('','',1,100).then(res=>{
          this.userList = res.records
        })*/
        userAPI.getSelectList('').then(res=>{
          this.userList = res.result
        })
      },
      submitChecker(){
        // let-todo 选择人员模板后，复制userlist的副本，并去除已选的人员
        let user = null
        for(let val of this.userList){
          if(val.value === this.checkUser){
            user = val
            break
          }
        }
        if(this.isAddApprove){
          this.showWenPersonArr.push(user)
        }else{
          this.readWenPersonArr.push(user)
        }
        this.personDialog = false
      },
      addPerson(type){
        this.isAddApprove = type
        this.personDialog = true
      },
      removePerson(val,type){
        if(type){
          for(let i in this.showWenPersonArr){
            if(this.showWenPersonArr[i].value === val){
              this.showWenPersonArr.splice(i,1)
            }
          }
        }else{
          for(let i in this.readWenPersonArr){
            if(this.readWenPersonArr[i].value === val){
              this.readWenPersonArr.splice(i,1)
            }
          }
        }
      },
      submit(){
        let handleIdList = []
        let readIdList = []
        for(let el of this.showWenPersonArr){
          handleIdList.push(el.value)
        }
        for(let el of this.readWenPersonArr){
          readIdList.push(el.value)
        }
        console.log(handleIdList,readIdList)
        receiptAPI.auditHandle(this.receipt.docId,{
          handleIdList,readIdList
        }).then(res=>{
          this.$message.success('提交成功')
          this.$router.push('/receipt/receipt-verify')
        })
      },
      showWenChange(val){
        const el = this.getObjectByKey(val,this.showWenList)
        this.showWenPersonArr = JSON.parse(JSON.stringify(el.userList))
        console.log(this.showWenPersonArr)
      },
      readWenChange(val){
        const el = this.getObjectByKey(val,this.readWenList)
        this.readWenPersonArr = JSON.parse(JSON.stringify(el.userList))

      },
      getObjectByKey(objectKey,arr){
        for(const el of arr){
          if(el.tid === objectKey){
            return el
          }
        }
      },
      fetchData(){
        receiptAPI.getById(this.receipt.docId).then(res=>{
          this.receipt = res
          console.log(this.receipt)
        }).catch(err=>{
          console.log(err)
        })
      },
      getReceiptDocumentTemplateList(){
        oaTemplateAPI.getReceiptDocumentTemplateList().then(res=>{
          this.showWenList = res.result
          console.log(this.showWenList)
        }).catch(err=>{
          console.log(err)
        })
      },
      getReceiptReadTemplateList(){
        oaTemplateAPI.getReceiptReadTemplateList().then(res=>{
          this.readWenList = res.result
          console.log(this.readWenList)
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  }
</script>
<style lang="scss">
  .receipt-detail {
    .el-dialog {
      width: 400px;
      .el-select {
        width: 100%;
      }
    }
    .el-dialog__footer {
      padding-bottom: 10px;
    }
  }
</style>
<style scoped lang="scss">
  $height:35px;
  $borderColor:1px solid #e0e0e0;
  $boxShadow:0 0 3px rgba(0,0,0,0.1);

  .list-move {
    transition: transform 0.3s linear;
  }

  .app-container {
    font-size: 14px;
    padding: 15px 150px;
    background-color: #F4F9FD;
    min-height: calc(100vh - 86px);
    box-sizing: border-box;
  }

  .detail-container {
    border: $borderColor;
    margin-bottom: 20px;
    box-shadow: $boxShadow;
    overflow: hidden;
    border-radius: 5px;
    .detail-table {
      padding: 15px;
      line-height: 30px;
      background-color: white;
      tr>td:nth-of-type(odd) {
        color:#99a9bf;
      }
    }
    .detail-content {
      background-color: white;
      padding: 15px;
      line-height: 30px;
      border-top: $borderColor;
    }
  }

  .circulation-container {
    border: $borderColor;
    margin-bottom: 20px;
    box-shadow: $boxShadow;
    overflow: hidden;
    border-radius: 5px;
    .main {
      padding: 15px 15px 15px;
      background: white;
      display: flex;
      justify-content: space-around;

      .staff-template,.watch-template {
        width: 100%;
        border: 1px solid #eee;
        box-shadow: 0 0 1px rgba(0,0,0,0.1);
        transition: height 0.2s;

        .section {
          padding: 15px;
          font-size: 13px;
        }
        .svg-icon {
          font-size: 20px;
          margin-left: 10px;
          cursor: pointer;
          transition: transform 0.3s;
          &:hover {
            transform: scale(1.1);
          }
        }

        li {
          line-height: 40px;
          border-bottom: 1px dashed #eee;
          display: flex;
          justify-content: space-between;
          user-select: none;
          cursor: move;
          /*transition: background-color 0.3s;*/
          padding: 0 10px;
          &:hover {
            background-color: #f3f3f3;
          }
          p:first-of-type {
            i {
              margin-right: 10px;
              vertical-align: middle;
            }
            span {
              vertical-align: middle;
            }
          }
          p:last-of-type {
            i {
              vertical-align: middle;
            }
          }
        }
      }
      .staff-template {
        margin-right: 15px;
      }

      i {
        font-size: 15px;
        cursor: pointer;
        /*margin-right: 10px;*/
        transition: all 0.1s linear;
        color:gray;
        &:hover {
          /*transform: scale(1.1);*/
          color: #409EFF;
        }
        &.template-add {
          margin-left: 10px;
          font-size: 20px;
          /*margin-right: 0;*/
        }
      }

    }
    .tip {
      padding: 15px 15px;
      font-size: 13px;
      background-color: white;
      color:gray;
      i {
        font-size: 14px;
        margin-right: 5px;
      }
    }
    .footer {
      line-height: 60px;
      text-align: center;
      background-color: white;
      border-top: $borderColor;
    }
  }

  table tr td:nth-of-type(odd){
    text-align: right;
    width: 10%;
    color: #606060;
    font-size: 13px;
  }
  table tr td:nth-of-type(even){
    text-align: left;
    padding-left: 10px;
    width: 15%;
    box-sizing: border-box;
    color: #555555;
  }

  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;
    .top-bar-tag {
      width: 5px;
      height: $height;
    }
    .top-bar-title{
      font-size: 16px;
    }
    .top-bar-section {

    }
  }



</style>
